import React, { useState, useEffect } from 'react'
import { useMappedState, useDispatch } from "redux-react-hook"
import {
    Form,
    Input,
    Button,
    Table,
    Space,
    Select,
    Drawer,
    message,
    Popconfirm
} from 'antd';
import { UserOutlined, PhoneOutlined, DingdingOutlined } from '@ant-design/icons';
import Brokers from "../../store/actions/Broker";
import request from "../../utils/request";

import "./Broker.css"

const Broker = () => {
    const dispatch = useDispatch();
    const [visible, setVisible] = useState(false);
    const [flag, setFlag] = useState(false);

    useEffect(() => {
        getter();
    }, [])


    const onFinish = (values) => {
        if (!values.name) values.name = "";
        if (!values.state) values.state = "";
        const newress = request({
            url: "/api/searchbroker",
            method: "get",
            params: {
                ...values,
            }
        })
        newress.then(res => {
            if (res.code !== 200) {
                message.error(res.message);
            }
            dispatch(Brokers.getBroker(res.data))
        })
    }

    //获取数据
    const { Brokerlist, from } = useMappedState((state) => {
        return state.Broker
    })

    const getter = () => {
        const newress = request({
            url: "/api/Getbroker",
            method: "get",
            params: {
                ...{ state: "" }
            }
        })
        newress.then(res => {
            if (res.code !== 200) {
                message.error(res.message);
            }
            dispatch(Brokers.getBroker(res.data))
        })
    }
    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/Deletebroker",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter();
    }

    //表格
    const { Column } = Table;
    const { Option } = Select;

    //弹框
    const showDrawer = (type, text) => {
        if (type === "新增") {
            setFlag(true)
        } else {
            setFlag(false);
            dispatch(Brokers.editorbroker({
                ...text
            }))
        }
        setVisible(true);
    };
    const onClose = () => {
        dispatch(Brokers.editorbroker({
            name: '',
            phone: '',
            company: '',
            id: "",
        }))
        setVisible(false);
    };

    const Change = (type, e) => {
        dispatch(Brokers.editorbroker({ type, e }))
    }

    const AddEditorBroker = () => {
        if (flag) {
            dispatch(Brokers.addBroker({}))
        } else {
            dispatch(Brokers.editorBroker({}))
        }
        onClose();
        getter();
    }

    //状态
    const State = async (text, type) => {
        let res = await request({
            url: "/api/statebroker",
            method: "put",
            data: {
                id: text.id,
                type,
            }
        })
        message.success(res.message);
        getter();
    }
    return (
        <div className="Broker">
            <div className="BrokerHeader">
                经济人管理
            </div>
            <div className="BrokerMain">
                <div className="BrokerTop">
                    <Form name="complex-form" onFinish={onFinish} >
                        <Form.Item
                            name="name"
                            label="搜索:"
                        >
                            <Input placeholder="请输入经纪人姓名/手机号" />
                        </Form.Item>
                        <Form.Item
                            name="state"
                            label="状态:"
                        >
                            <Select
                                placeholder="请选择"
                            >
                                <Option value="在职">在职</Option>
                                <Option value="离职">离职</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" onClick={() => showDrawer("新增")}>
                                新增
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Brokermain">
                    <Table dataSource={Brokerlist} bordered>
                        <Column title="序号" dataIndex="key" key="key" align="center" />
                        <Column title="姓名" dataIndex="name" key="name" align="center" />
                        <Column title="手机号" dataIndex="phone" key="phone" align="center" />
                        <Column title="公司" dataIndex="company" key="company" align="center" />
                        <Column title="新房" dataIndex="newhome" key="newhome" align="center" />
                        <Column title="二手房" dataIndex="twohome" key="twohome" align="center" />
                        <Column title="租房" dataIndex="renthome" key="renthome" align="center" />
                        <Column title="状态" dataIndex="state" key="state" align="center" />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space size="middle">
                                    <a onClick={() => showDrawer("编辑", record)}>编辑</a>
                                    <Popconfirm
                                        title="是否要删除？请再次确定"
                                        onConfirm={() => Delete(record)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <a>删除</a>
                                    </Popconfirm>
                                    <a onClick={() => { State(record, "在职") }}>启用</a>
                                    <a onClick={() => { State(record, "离职") }}>禁用</a>
                                </Space>
                            )}
                            align="center" />
                    </Table>
                </div>
            </div>
            <div className="Add">
                <Drawer
                    title={flag ? "新增" : "编辑"}
                    width={500}
                    onClose={onClose}
                    visible={visible}
                    extra={
                        <Space>
                            <Button onClick={onClose}>取消</Button>
                            <Button type="primary" onClick={() => AddEditorBroker()}>
                                确定
                            </Button>
                        </Space>
                    }
                >
                    <Input size="large" placeholder="请输入姓名" value={from.name} prefix={<UserOutlined />} onChange={(e) => Change("name", e.target.value)} />
                    <br />
                    <br />
                    <Input size="large" placeholder="请输入手机号" value={from.phone} prefix={<PhoneOutlined />} onChange={(e) => Change("phone", e.target.value)} />
                    <br />
                    <br />
                    <Input size="large" placeholder="请输入公司" value={from.company} prefix={<DingdingOutlined />} onChange={(e) => Change("company", e.target.value)} />
                </Drawer>
            </div>
        </div>
    )
}

export default Broker
